<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
</head>
<body>
    <h2>过滤器</h2>
    <p>把数据经过函数的加工，然后返回结果。实际上和computed作用差不多。</p>
    <p>语法：数据 | 过滤器 </p>
    <main id="app">
        <p>原值：{{num1}}，过滤后（+5）：{{num1 | addFive}}</p>
        <p>原值：{{num1}}，过滤后（+5 * 2）：{{num1 | addFiveBy(2)}}</p>
        <p>原值：{{num1}}，过滤后（+5 * 3）：{{num1 | addFiveBy(3)}}</p>
        <p>原值：{{num1}}，过滤后（+4）：{{num1 | addFour}}</p>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    // 全局挂载: 把数据 +5 返回
    Vue.filter("addFive",value => value + 5);

    new Vue({
        el: "#app",
        data: {
            num1: 5
        },
        // 局部挂载
        filters: {
            addFour: value => value + 4,
            addFiveBy(value,value2) {
                return (value + 5) * value2;
            }
        }
    })
</script>
</html>